*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
}

/*初步修改字体样式*/
a {
  text-decoration: none;
  color: #272727;
  outline: none;
}

main {
  position: relative;
  width: 100%;
}

/*整体布局*/
.content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0 auto;
  padding: 3em 2em;
}

.menu {
  position: relative;
  z-index: 10;
  font-family: sans-serif;
  font-size: 1.5em;
}

.item {
  line-height: 1;
  position: relative;
  display: block;
  margin: 1em 0;
  outline: none;
}

/*每个项目内部布局*/
.item-name,
.item-label {
  position: relative;
  display: inline-block;
}

.item-name {
  font-size: 1.7em;
}

.item-label {
  margin: 0 0 0 0.5em;
}

/*name 部分字体样式*/
.item-name {
  font-weight: bold;
  line-height: 1.4;
  padding: 0 0.35em;
  transition: color 0.5s;
  /*transform的时间曲线（默认的几个参数不太好用）*/
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.item-label {
  font-size: 1em;
  letter-spacing: 0.05em;
  /*文字移动效果*/
  transform: translate3d(-0.5em, 0, 0);
  transition: transform 0.5s, color 0.5s;
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

/*背景颜色部分*/
.item-name::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  opacity: 0.3;
  /*利用scale3d隐藏背景颜色*/
  transform: scale3d(0, 1, 1);
  transform-origin: 0% 50%;
  transition: transform 0.5s;
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

/*下划线部分*/
.item-label::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(100% + 0.1em);
  left: 0.05em;
  width: 25%;
  height: 1px;
  opacity: 0.3;
  /*利用scale3d隐藏下划线*/
  transform: scale3d(0, 1, 1);
  transform-origin: 100% 50%;
  transition: transform 0.5s;
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

/*hover ,fouse效果*/
/*分奇偶*/

/*设置背景和下划线*/
.item:nth-child(odd) .item-name::before,
.item:nth-child(odd) .item-label::before {
  background: #6265fe;
}

.item:nth-child(even) .item-name::before,
.item:nth-child(even) .item-label::before {
  background: #fe628e;
}

/*设置文字颜色*/
.item:nth-child(odd):hover,
.item:nth-child(odd):focus {
  color: #6265fe;
}

.item:nth-child(even):hover,
.item:nth-child(even):focus {
  color: #fe628e;
}

/*利用scale3d显示背景色和下划线*/
.item:hover .item-name::before,
.item:focus .item-name::before,
.item:hover .item-label::before,
.item:focus .item-label::before {
  transform: scale3d(1, 1, 1);
}

/*文字移动效果*/
.item:hover .item-label,
.item:focus .item-label {
  transform: translate3d(0, 0, 0);
}